<template>
	<div class="content">
		<!-- 查看可预约场馆 -->
		<el-card shadow="hover" style="margin-bottom: 15px">
			<div class="header">
				<el-row style="line-height: 40px">
					<!-- 场馆类型 -->
					<el-col :span="4" :xs="8" class="_search-box">
						<div style="float: left">
							<span class="span-size">场馆类型：</span>
						</div>
						<el-select v-model="typeName" placeholder="请选择" @change="roomType">
							<el-option
								v-for="item in typeList"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							></el-option>
						</el-select>
					</el-col>
					<!-- 场馆名称 -->
					<el-col :span="4" :xs="20" class="_search-box">
						<div style="float: left">
							<span class="span-size">场馆名称：</span>
						</div>
						<el-select v-model="dictTypeValue" placeholder="请选择" @change="roomValue">
							<el-option
								v-for="item in dictTypeList"
								:key="item.value"
								:label="item.name"
								:value="item.value"
							></el-option>
						</el-select>
					</el-col>
					<!-- 日期查询 -->
					<el-col :span="10" :xs="16" class="_search-box">
						<div style="float: left">
							<span class="span-size">日期查询：</span>
						</div>
						<!-- <el-date-picker
							v-model="value"
							align="right"
							type="date"
							placeholder="选择日期"
							@change="getDateTime"
							format="yyyy 年 MM 月 dd 日"
							value-format="yyyy-MM-dd"
							:picker-options="pickerOptions"
						></el-date-picker>-->
						<el-date-picker
							v-model="dateTime"
							type="datetimerange"
							:picker-options="pickerOptions"
							@change="getDateTime"
							value-format="yyyy-MM-dd HH:mm:ss"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							align="right"
						></el-date-picker>
					</el-col>
					<!-- 重置查询按钮 -->
					<el-col :span="3" :xs="24" class="_search-box">
						<div style="width: 100%; text-align: right">
							<el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
							<el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
						</div>
					</el-col>
				</el-row>
			</div>
		</el-card>
		<!-- 表格table-渲染可预约场馆 -->
		<p style="text-align: center; margin-bottom: 15px; font-weight: bold">可预约教室</p>
		<!-- 室内场馆 -->
		<div class="table" v-if="typeName === 'am_room_type'">
			<el-table :data="tableData" ref="multipleTable" stripe>
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="roomName" label="场馆名称" align="center"></el-table-column>
				<el-table-column prop="buildingName" label="所在地" align="center"></el-table-column>
				<el-table-column prop="floor" label="楼层" align="center"></el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button :plain="true" @click="handleClick(scope.row)" type="text" size="small">
							预约
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 室外场馆 -->
		<div class="table" v-else>
			<el-table :data="tableData" ref="multipleTable" stripe>
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="venueName" label="场馆名称" align="center"></el-table-column>
				<el-table-column prop="openingHours" label="开放时间" align="center"></el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button :plain="true" @click="handleClick1(scope.row)" type="text" size="small">
							预约
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 日历 -->
		<!-- <el-calendar v-model="value">
			<template slot="dateCell" slot-scope="{ date, data }">
				<p>
					{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : '' }}
					<el-button
						type="text"
						@click.stop="dialogFormVisible = true"
						@click="changeTime(date, data)"
					>+</el-button>
				</p>
				<div>
					<p v-html="dealMyDate(data.day)"></p>
					<br />
				</div>
			</template>
		</el-calendar> -->
		<!-- 弹出场馆预约模态框 -->
		<!-- <el-dialog title="添加预约信息" :visible.sync="dialogFormVisible">
			<el-form :model="form">
				<el-form-item label="备注" :label-width="formLabelWidth">
					<el-input v-model="form.appRemark" autocomplete="off" placeholder="备注">></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="input">确 定</el-button>
			</div>
		</el-dialog>-->
		<!-- 分页pagination -->
		<div class="pagination">
			<el-pagination
				small
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="page.currentPage"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="page.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="page.total"
			></el-pagination>
		</div>
	</div>
</template>

<script>
import { setStore } from '@/methods/utils'
import { appoinmentsSites, getType, appoinmentProcesses } from '@/APIs/index/index'
export default {
	name: 'appoinmentsSites',
	data() {
		return {
			typeList: [
				{
					value: 'am_room_type',
					label: '教室'
				},
				{
					value: 'am_venue_type',
					label: '运动场'
				}
			],
			dictTypeList: [],
			typeName: [],
			list: [],
			page: {
				currentPage: 1,
				pageSize: 10,
				total: 0
			},
			venuesDetailsList: [],
			tableData: [],
			switchValue: true,
			dictTypeValue: null,
			// value: new Date(),
			formLabelWidth: '120px',
			dialogFormVisible: false,
			form: {
				appSiteName: '',
				appAddress: '',
				appType: '',
				appSiteType: '',
				appStartTime: '',
				appEndTime: '',
				appRemark: '',
				siteId: ''
			},
			// resDate: [
			// 	{
			// 		date: '2020-09-20',
			// 		content: [
			// 			{
			// 				appSiteType: '运动场',
			// 				appSiteName: '场馆A',
			// 				appStartTime: '13:00',
			// 				appEndTime: '14:00'
			// 			}
			// 		]
			// 	}
			// ],
			dateTime: [new Date(), new Date()]
		}
	},
	created() {
		// this.$nextTick(() => {
		// 	// 点击前一个月
		// 	let prevBtn = document.querySelector(
		// 		'.el-calendar__button-group .el-button-group>button:nth-child(1)'
		// 	)
		// 	prevBtn.addEventListener('click', e => {
		// 		let d = new Date(this.timeValue)
		// 		let resDate = d.getFullYear() + '-' + this.handleTime(d.getMonth() + 1) //2020-08
		// 	})
		// 	//点击下一个月
		// 	let nextBtn = document.querySelector(
		// 		'.el-calendar__button-group .el-button-group>button:nth-child(3)'
		// 	)
		// 	nextBtn.addEventListener('click', e => {
		// 		let d = new Date(this.timeValue)
		// 		let resDate = d.getFullYear() + '-' + this.handleTime(d.getMonth() + 1) //2020-10
		// 	})
		// 	//点击今天
		// 	let todayBtn = document.querySelector(
		// 		'.el-calendar__button-group .el-button-group>button:nth-child(2)'
		// 	)
		// 	todayBtn.addEventListener('click', e => {
		// 		let d = new Date(this.timeValue)
		// 		let resDate = d.getFullYear() + '-' + this.handleTime(d.getMonth() + 1) //2020-09
		// 	})
		// })
	},
	mounted() {},
	methods: {
		// 请求教室类型
		async roomType(v) {
			const dictType = v
			const data = await getType({
				dictType
			})
			// eslint-disable-next-line no-unused-vars
			const dictTypeList = {}
			for (let i = 0; i < data.data.length; i++) {
				this.dictTypeList.push({
					name: data.data[i].dictLabel,
					value: data.data[i].dictValue
				})
			}
			console.log(this.dictTypeList)
			this.roomValue(v)
		},
		// 请求教室名称
		roomValue(v) {
			const value = v
			console.log(value)
		},
		// 点击查询按钮
		async query() {
			this.roomType()
			const type = this.typeName
			const siteType = this.dictTypeValue
			const startTime = this.dateTime[0]
			const endTime = this.dateTime[1]
			const { currentPage: pageNum, pageSize } = this.page
			const {
				data: { list = [], total }
			} = await appoinmentsSites({
				type,
				siteType,
				startTime,
				endTime,
				pageNum,
				pageSize
			})
			this.tableData = list.map(item => ({ ...item, visible: false }))
			setStore('appoinmentsSites', JSON.stringify(list))
			this.venuesDetailsList = list
			this.page.total = total
			console.log(list, total, type, siteType, startTime, endTime)
		},
		// 点击下一页
		async handleCurrentChange(val) {
			this.page.currentPage = val
			const type = this.typeName
			const siteType = this.dictTypeValue
			const startTime = this.dateTime[0]
			const endTime = this.dateTime[1]
			const { currentPage: pageNum, pageSize } = this.page
			const {
				data: { list = [], total }
			} = await appoinmentsSites({
				type,
				siteType,
				startTime,
				endTime,
				pageNum,
				pageSize
			})
			this.tableData = list.map(item => ({ ...item, visible: false }))
			setStore('appoinmentsSites', JSON.stringify(list))
			this.venuesDetailsList = list
			this.page.total = total
			console.log(list, total, type, siteType, startTime, endTime)
		},
		handleSizeChange(val) {
			console.log(val)
		},
		// 点击预约弹出输入框
		handleClick(row) {
			console.log(row)
			this.$prompt('请输入备注，若无需备注，请直接点击确认即可', '注意', {
				confirmButtonText: '确定',
				cancelButtonText: '取消'
			})
				.then(({ value }) => {
					this.$message({
						type: 'success',
						message: '预约成功'
					})
					const appSiteName = row.roomName
					const appAddress = row.buildingName
					const appType = this.typeName
					const appSiteType = this.dictTypeValue
					const appStartTime = this.dateTime[0]
					const appEndTime = this.dateTime[1]
					const appRemark = value
					const siteId = row.roomId
					console.log(
						'场地名称（？）',
						appSiteName,
						'场地地点（？）',
						appAddress,
						'场地分类',
						appType,
						'场地类型（？）',
						appSiteType,
						'开始时间',
						appStartTime,
						'结束时间',
						appEndTime,
						'备忘',
						appRemark,
						'对应场地的具体信息ID',
						siteId
					)
					const data = appoinmentProcesses({
						appSiteName,
						appAddress,
						appType,
						appSiteType,
						appStartTime,
						appEndTime,
						appRemark,
						siteId
					})
					console.log(data)
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					})
				})
		},
		handleClick1(row) {
			console.log(row)
			this.$prompt('请输入备注，若无需备注，请直接点击确认即可', '注意', {
				confirmButtonText: '确定',
				cancelButtonText: '取消'
				// beforeClose: async (action, instance, done) => {
				// 	if (action === 'confirm') {
				// 		instance.confirmButtonLoading = true
				// 		instance.confirmButtonText = '添加中...'
				// 		try {
				// 			const { inputValue: thanks } = instance
				// 			const { data } = await appoinmentProcesses({ thanks })
				// 			this.thanksList.push({ ...data })
				// 			this.$message({ type: 'success', message: '添加成功' })
				// 			instance.confirmButtonLoading = false
				// 			done()
				// 		} catch (error) {
				// 			instance.confirmButtonLoading = false
				// 			done()
				// 			throw new Error(error)
				// 		}
				// 	} else {
				// 		done()
				// 	}
				// }
			})
				.then(({ value }) => {
					this.$message({
						type: 'success',
						message: '预约成功'
					})
					const appSiteName = row.venueName
					const appType = this.typeName
					const appSiteType = this.dictTypeValue
					const appStartTime = this.dateTime[0]
					const appEndTime = this.dateTime[1]
					const appRemark = value
					const siteId = row.schoolId
					console.log(
						'场地名称（？）',
						appSiteName,
						'场地分类',
						appType,
						'场地类型（？）',
						appSiteType,
						'开始时间',
						appStartTime,
						'结束时间',
						appEndTime,
						'备忘',
						appRemark,
						'对应场地的具体信息ID',
						siteId
					)
					const data = appoinmentProcesses({
						appSiteName,
						appType,
						appSiteType,
						appStartTime,
						appEndTime,
						appRemark,
						siteId
					})
					console.log(data)
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					})
				})
		},
		// 点击重置按钮
		reset() {
			console.log('重置')
			this.typeName = []
			this.tableData = []
			this.dictTypeValue = null
			this.dateTime = [new Date(), new Date()]
		},
		// 得到日期和时间
		getDateTime() {
			var dateTime = this.dateTime
			console.log(dateTime)
		},
		// 渲染预约信息
		dealMyDate(v) {
			// console.log(this.date)
			let len = this.resDate.length
			let res = ''
			for (let i = 0; i < len; i++) {
				let len1 = this.resDate[i].content.length
				for (let j = 0; j < len1; j++) {
					if (this.resDate[i].date == v) {
						// console.log(len1);
						res = `${this.resDate[i].content[j].appStartTime}-${this.resDate[i].content[j].appEndTime}<br>
						${this.resDate[i].content[j].appSiteType}-${this.resDate[i].content[j].appSiteName}`
					}
				}
			}
			return res
		},
		// 点击天数
		changeTime(date, data) {
			console.log(date, 1111, data, 2222)
			this.form.date = data.day
			console.log(this.form)
		},
		// 添加预约信息
		input() {
			this.dialogFormVisible = false
			console.log(this)
			console.log(this.$refs)
		},
		// 处理时间
		handleTime(s) {
			return s < 10 ? '0' + s : s
		},
		// 添加感谢语句
		appoinmentPro() {
			this.$prompt('请输入自定义感谢语', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				inputPattern: /^\S+/g,
				inputErrorMessage: '请输入自定义感谢语',
				beforeClose: async (action, instance, done) => {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true
						instance.confirmButtonText = '添加中...'
						try {
							const { inputValue: thanks } = instance
							const { data } = await appoinmentProcesses({ thanks })
							this.thanksList.push({ ...data })
							this.$message({ type: 'success', message: '添加成功' })
							instance.confirmButtonLoading = false
							done()
						} catch (error) {
							instance.confirmButtonLoading = false
							done()
							throw new Error(error)
						}
					} else {
						done()
					}
				}
			})
		}
	}
}
</script>

<style>
.table {
	margin-bottom: 15px;
}
.div-Calendar {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.calendar-day {
	text-align: align= 'center';
	color: #202535;
	line-height: 30px;
	font-size: 12px;
}

.is-selected {
	color: #f8a535;
	font-size: 10px;
	margin-top: 5px;
}

#calendar .el-button-group > .el-button:not(:first-child):not(:last-child):after {
	content: '当月';
}
</style>
